<template>
  <div class="hello">
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="CmdType">
        <a-input default-value="8080" v-model="form.port">
          <a-select slot="addonBefore" v-model="form.http" style="width: 150px">
            <a-select-option value="http://localhost:">
              http://localhost:
            </a-select-option>
            <a-select-option value="https://localhost:">
              https://localhost:
            </a-select-option>
          </a-select>
          <a-select slot="addonAfter" v-model="form.CmdType" default-value="PutType" style="width: 120px">
            <a-select-option value="PutType">
              PutType
            </a-select-option>
            <a-select-option value="GetType">
              GetType
            </a-select-option>
            <a-select-option value="DeleteType">
              DeleteType
            </a-select-option>

          </a-select>
        </a-input>

      </a-form-model-item>

      <a-form-model-item label="Key">
        <a-input v-model="form.Key" />
      </a-form-model-item>

      <a-form-model-item label="Value">
        <a-input v-model="form.Value" />
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">
          确定
        </a-button>

      </a-form-model-item>
      <a-form-model-item label="result">
        <a-input v-model="form.result" type="textarea" :auto-size="{ minRows: 3, maxRows:8 }"/>
      </a-form-model-item>

    </a-form-model>



  </div>
</template>

<script>
import axios from 'axios'			//引入axios
export default {
  name: 'HelloWorld',
  data(){
    return{
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        CmdType:'PutType',
        http:'https://localhost:',
        port:'',
        Key:'',
        Value:'',
        result:''
      },

    }
  },
  methods:{
    onSubmit() {
      console.log('submit!');
      if(this.form.CmdType==='DeleteType'){
        console.log("this.form.http+this.form.port+'/delete'",this.form.http+this.form.port+'/delete')
        //删
        axios({
          method: 'post',
          url: this.form.http+this.form.port+'/delete',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          },
          data: {
            Key: this.form.Key
          },
        }).then(res => {
          console.log(JSON.stringify(res))
          this.form.result= JSON.stringify(res)
        })
      }else if(this.form.CmdType==='PutType'){
        console.log("this.form.http+this.form.port+'/put'",this.form.http+this.form.port+'/put')
        //写
        axios({
          method: 'post',
          url: this.form.http+this.form.port+'/put',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          },
          data: {
            Key: this.form.Key,
            Value:this.form.Value
          },
        }).then(res => {
          console.log(res)
          this.form.result= res
        })
      }else if(this.form.CmdType==='GetType'){
        console.log("this.form.http+this.form.port+'/get'",this.form.http+this.form.port+'/get')
        //读
        axios({
          method: 'get',
          url: this.form.http+this.form.port+'/get',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          },

          params: { Key:this.form.key }
        }).then(res => {
          console.log(res)
          this.form.result= res
        })
      }

    },

  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
